<template>
  <div id="app" class="app-wrapper" @mouseover="resetTimer">
    <router-view v-if="routerAlive"></router-view>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  name: 'App',
  // 提供 reload 方法给子组件
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      timer: null, // 定时器
      timeOut: 30000 * 60 * 1000, // 默认超时时间（30000分钟）
      routerAlive: true // 控制路由视图的显示
    }
  },
  mounted() {
    this.$router.onReady(() => {
      this.startTimer()
    })
    // 监听键盘和鼠标事件以重置定时器
    window.addEventListener('keydown', this.resetTimer)
    this.$el.addEventListener('mouseover', this.resetTimer)
  },
  beforeDestroy() {
    // 组件销毁前清理定时器和事件监听
    this.clearTimer()
    window.removeEventListener('keydown', this.resetTimer)
    this.$el.removeEventListener('mouseover', this.resetTimer)
  },
  methods: {
    // 刷新路由视图
    reload() {
      this.routerAlive = false
      this.$nextTick(() => {
        this.routerAlive = true
      })
    },
    // 启动定时器
    startTimer() {
      // 路由白名单，指定路径不启用定时器
      const whiteList = ['/realTimeScreen', '/bigScreen']
      if (whiteList.includes(this.$route.path)) {
        return
      }
      // 获取 cookie 中的超时时间，默认为 timeOut
      let timeout = Cookies.get('Zhuoguan_UILogoutInterval')
      timeout = isNaN(timeout) || timeout <= 0 ? this.timeOut : Number(timeout)
      timeout = Math.max(timeout, 30000) // 最小超时时间 30 秒
      this.clearTimer()
      // 设置定时器，超时后执行登出
      this.timer = setTimeout(() => {
        if (!whiteList.includes(this.$route.path)) {
          this.logout()
        }
      }, timeout)
    },
    // 重置定时器
    resetTimer() {
      if (this.timer) {
        this.startTimer()
      }
    },
    // 清除定时器
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    // 登出操作
    async logout() {
      await this.$store.dispatch('user/logout') // 调用 store 的登出方法
      this.$router.push('/login') // 跳转到登录页
      this.clearTimer() // 清除定时器
      // 移除事件监听
      window.removeEventListener('keydown', this.resetTimer)
      this.$el.removeEventListener('mouseover', this.resetTimer)
    }
  }
}
</script>

<style>
#app {
  height: 100%; 
  width: 100%;
}
</style>